<template>
  <div class="c_right">
    <div class="news">
      <div class="new_top m-auto"></div>
      <h3 class="mt-2">THE HOT NEWS</h3>
      <h4>最新新闻</h4>
      <div class="new-center" @click="$router.push('./newxq')">
        <div class="tint"></div>
        <div class="dark"></div>
        <img style="width: 700px;height:405px;" src="../../../assets/img/图片0.png" alt />
        <div class="new-bottom flex flex-column justify-center text-left">
          <span style="font-size: 24px;color: #FFFFFF;margin-left: 20px;">市委常委会召开2020年第35次会议</span>
          <span style="color: #FFFFFF; margin-left: 20px;">
            ------------------------------------------------------------------------------
            <i
              style="font-style:normal;display:block;width: 6px;height: 6px;background: #EDEDED;border-radius: 3px;"
            ></i>
            <img src="../../../assets/img/形状 1.png" alt />
          </span>
          <span
            style="margin-left: 20px;font-size: 12px;color: #FFFFFF;"
          >12月31日，市委书记李卫平主持召开市委常委会2020年第35次会议。</span>
        </div>
      </div>
    </div>
    <div class="allnew">
      <div class="new_top m-auto"></div>
      <h3 class="mt-2">THE HOT NEWS</h3>
      <h4>最新新闻</h4>
    </div>
    <newBottom></newBottom>
  </div>
</template>

<script>
import newBottom from "../news/newBottom";
export default {
  components: {
    newBottom,
  },
};
</script>

<style lang="stylus" scoped>
.c_right {
  width: 860px;
  height: 2538px;
  border: 1px solid #D2D2D2;
  margin-right: 40px;
}

.news {
  margin-top: 50px;
  text-align: center;
  height: 700px;

  h3 {
    font-size: 32px;
    color: #333333;
  }

  h4 {
    font-size: 24px;
    font-weight: 400;
    color: #0B0B0C;
    margin-top: -20px;
  }

  .new-center {
    margin-top: 80px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;

    .tint {
      width: 783px;
      height: 320px;
      background: #EEEEEE;
      opacity: 0.3;
      border-radius: 6px;
      position: absolute;
      left: 5%;
      right: 0;
    }

    .dark {
      width: 743px;
      height: 360px;
      background: #EEEEEE;
      border-radius: 6px;
      position: absolute;
      z-index: 1px;
      left: 7%;
      right: 0;
      top: -25px;
    }

    img {
      position: absolute;
      z-index: 2;
      left: 10%;
      right: 0;
      top: -45px;
    }

    .new-bottom {
      position: absolute;
      z-index: 3;
      width: 650px;
      height: 110px;
      background: #EB424C;
      border-radius: 2px;
      left: 13%;
      top: 320px;

      i {
        position: absolute;
        right: 85px;
        top: 61px;
      }

      img {
        position: absolute;
        left: 580px;
        top: 38px;
      }
    }
  }
}

.allnew {
  margin-top: 30px;
  text-align: center;

  h3 {
    font-size: 32px;
    color: #333333;
  }

  h4 {
    font-size: 24px;
    font-weight: 400;
    color: #0B0B0C;
    margin-top: -20px;
  }
}
</style>